<template>
  <div class="processBar">
    <div class="inner" :style="{ width: num / 4 * 100 + '%' }">
      
    </div>
    <span class="num" :style="{ margin: num / 4 * 800 + 'px'}">{{ num / 4 * 100 + '%' }}</span>
  </div>
  <br>
  <button @click="num = 0">0%</button>
  <button @click="num = 1">25%</button>
  <button @click="num = 2">50%</button>
  <button @click="num = 3">75%</button>
  <button @click="num = 4">100%</button>
</template>

<script setup>
  import { ref } from 'vue'
  const num = ref(0)

</script>

<style>
  *{
    margin: 0;
    padding: 0;
  }
  .processBar{
    background-color: black;
    width: 800px;
    height: 20px;
    border-radius: 15px;
  }
  .inner{
    height: 20px;
    background-color: lightblue;
    border-radius: 15px;
  }
  button{
    width: 50px;
  }
</style>